<script setup>
	import {
		computed
	} from "vue"
	import {
		defineProps
	} from "vue"

	const optionLabel = ['A', 'B', 'C', 'D']
	const props = defineProps({
		data: Object
	})
	const answer = computed(() => {
		let arr = []
		props.data.options.forEach((v, i) => {
			if (v.answer === 1) {
				arr.push(optionLabel[i])
			}
		})
		return arr.join('')
	})
</script>

<template>
	<view style="padding: 20rpx 0;">
		<label class="q-type">单选题</label>
	</view>
	<view style="padding: 10rpx;">
		<view style="height: 40rpx;"></view>
		<uv-parse :content="data.content"></uv-parse>
		<view style="height: 40rpx;"></view>
		<view class="q-option" v-for="(item, index) in data.options" :key="index"
			:class="[item.checked === 1 ? 'q-option-true' : (item.checked !== item.answer ? 'q-option-false': '')]">
			<view v-if="item.checked === 1" style="padding-right: 10rpx;">
				<image src="/pages_nbst/static/images/my/true.png" mode="widthFix" style="width: 40rpx;height: auto;" />
			</view>
			<view v-else-if="item.checked !== item.answer" style="padding-right: 10rpx;">
				<image src="/pages_nbst/static/images/my/false.png" mode="widthFix" style="width: 40rpx;height: auto;" />
			</view>
			<view v-else>{{optionLabel[index]}}、</view>
			<uv-parse :content="item.label"></uv-parse>
		</view>
	</view>
	<view style="display: flex;align-items: center;">
		<view v-if="data.correct === 1" style="padding-right: 10rpx;">
			<image src="/pages_nbst/static/images/my/true.png" mode="widthFix" style="width: 40rpx;height: auto;" />
		</view>
		<view v-else style="padding-right: 10rpx;">
			<image src="/pages_nbst/static/images/my/false.png" mode="widthFix" style="width: 40rpx;height: auto;" />
		</view>
		<span>您的答案：</span> <span :style="{'color': data.correct === 1 ? '#26ac55' : '#e73434'}">{{answer}}</span>
	</view>
	<view>
		解析：
		<uv-parse :content="data.analysis"></uv-parse>
	</view>
</template>

<style scoped lang="scss">
	.q-type {
		color: white;
		background-color: #6f95c2;
		padding: 14rpx;
	}

	.q-option {
		border: 2rpx solid #b8b8b8;
		border-radius: 10rpx;
		background-color: #f5f5f5;
		margin-bottom: 18rpx;
		padding: 18rpx;
		display: flex;
	}

	.q-option-true {
		color: #26ac55;
		border: 2rpx solid #26ac55;
		background-color: #eafcf0;
	}

	.q-option-false {
		color: #e73434;
		border: 2rpx solid #e73434;
		background-color: #fcdede;
	}
</style>